<template>
	<div>
		<div style="padding: 0px 15px;display: flex">
			<el-radio-group style="padding-top: 5px;width: 30%" v-model="chartType" @change="chartChange">
				<el-radio :label="1">{{$t('message.histogram')}}</el-radio>
				<el-radio :label="2">{{$t('message.graph')}}</el-radio>
				<el-radio :label="3">{{$t('message.pieChart')}}</el-radio>
			</el-radio-group><br/><br/>
			<div style="width: 70%;text-align: right;display: inline">
				<el-select style="width: 160px; margin-left: 20px;" v-model="MonthOrDay" size="small" placeholder="请选择" @change="MonthOrDay === 'month'?initMonth() : initDate()">
					<el-option label="查询某月用电量" value="month"></el-option>
					<el-option label="查询某日用电量" value="day"></el-option>
				</el-select>
				<el-date-picker v-if="MonthOrDay == 'month'" size="small" :editable="false" :clearable="false" v-model="selectedDate" type="month" @change="getDatas"></el-date-picker>
				<el-date-picker v-else="MonthOrDay == 'day'" size="small" :editable="false" :clearable="false" v-model="selectedDate" type="date" @change="getDatas"></el-date-picker>
			</div>
		</div>
		<div id="echart1" style="width:100%;height: 500px;margin:auto;"></div>
	</div>
</template>
<script>
	import $ from 'jquery'
	//import echarts from 'echarts/lib/echarts'
	var echarts = require('echarts/lib/echarts');
	// 引入柱状图
	require('echarts/lib/chart/bar');
	// 引入饼状图
	require('echarts/lib/chart/pie');
	// 引入曲线图
	require('echarts/lib/chart/line');
	// 引入提示框和标题组件
	require('echarts/lib/component/tooltip');
	require('echarts/lib/component/title');
	require('echarts/lib/component/legend')

	import { HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	var myChart = null;
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var o = {
					"M+": this.getMonth() + 1, //month 
					"d+": this.getDate(), //day 
					"h+": this.getHours(), //hour 
					"m+": this.getMinutes(), //minute 
					"s+": this.getSeconds(), //second 
					"q+": Math.floor((this.getMonth() + 3) / 3), //quarter 
					"S": this.getMilliseconds() //millisecond 
				}
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for(var k in o) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
					}
				}
				return format;
			};
			Array.prototype.sum = function() {
				var result = 0;
				for(var i = 0; i < this.length; i++) {
					result += this[i];
				}
				return result;
			};
			return {
				chartType: 1, //1 柱状图 2 折线图
				titleName: '',
				xAxisData: [], //横坐标
				seriesDatas: [], //指
				legendDatas: [], //线路
				Year: "",
				Month: "",
				Day: "",
				MonthOrDay: "",
				selectedDate: new Date(),
				tableData: [],
				imgTitle: ""
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				this.$emit('backPrev');
			},
			getLastDayOfMonth(year, month) {
				var new_year = year; //取当前的年份          
				var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）          
				if(month > 12) {
					new_month -= 12; //月份减          
					new_year++; //年份增          
				}
				var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天          
				return(new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate(); //获取当月最后一天日期          
			},
			chartChange(data) {
				switch(data) {
					case 1:
						this.drawBar();
						break;
					case 2:
						this.drawLine();
						break;
					case 3:
						this.drawPie();
						break;
				}
			},
			drawBar() {
				this.getSeriesDatas(this.tableData);
				myChart = echarts.init(document.getElementById('echart1'));
				myChart.setOption({
					title: {
						text: this.imgTitle,
						x: 'center'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					xAxis: {
						data: this.xAxisData,
						name: '线路'
					},
					yAxis: {
						name: '耗电量(度)',
						type: 'value'
					},
					series: this.seriesDatas
				});
			},
			drawLine() {
				this.getSeriesDatas(this.tableData);
				myChart = echarts.init(document.getElementById('echart1'));
				myChart.setOption({
					title: {
						text: this.imgTitle,
						x: 'center'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					xAxis: {
						data: this.xAxisData,
						name: '线路'
					},
					yAxis: {
						name: '耗电量(度)',
						type: 'value'
					},
					series: this.seriesDatas
				});
			},
			drawPie() {
				this.getSeriesDatas(this.tableData);
				myChart = echarts.init(document.getElementById('echart1'));
				myChart.setOption({
					title: {
						text: this.imgTitle,
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: this.legendDatas
					},
					series: [{
						name: '线路',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: this.seriesDatas[0].data,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				})
			},
			getSeriesDatas(array) {
				this.seriesDatas.length = 0;
				this.legendDatas.length = 0;
				switch(this.chartType) {
					case 1:
						this.seriesDatas[0] = {};
						this.seriesDatas[0].data = [];
						this.seriesDatas[0].type = 'bar';
						for(var i = 0; i < array.length; i++) {
							this.seriesDatas[0].data.push(array[i].electricity);
						}
						break;
					case 2:
						this.seriesDatas[0] = {};
						this.seriesDatas[0].data = [];
						this.seriesDatas[0].type = 'line';
						for(var i = 0; i < array.length; i++) {
							this.seriesDatas[0].data.push(array[i].electricity);
						}
						break;
					case 3:
						this.seriesDatas[0] = {};
						this.seriesDatas[0].data = [];
						for(var i = 0; i < array.length; i++) {
							if(array[i].addr == 0){
								this.legendDatas.push('总路');
								this.seriesDatas[0].data.push({
									value: array[i].electricity,
									name: '总路'
								});
							}else{
								this.legendDatas.push('线路' + array[i].addr);
								this.seriesDatas[0].data.push({
									value: array[i].electricity,
									name: '线路' + array[i].addr
								});
							}
							
						}
				}
			},
			initDate() {
				let formateDate = this.selectedDate.format("yyyy-MM-dd");
				let array = formateDate.split('-')
				this.Year = array[0];
				this.Month = array[1];
				this.Day = array[2];
			},
			initMonth() {
				let formateDate = this.selectedDate.format("yyyy-MM-dd");
				let array = formateDate.split('-')
				this.Year = array[0];
				this.Month = array[1];
				this.Day = null;
			},
			getDatas() {
				if(this.MonthOrDay === 'month') {
					this.initMonth(this.selectedDate);
				} else if(this.MonthOrDay === 'day') {
					this.initDate(this.selectedDate);
				}
				let params = {
					mac: this.templateObj.sn,
					year: this.Year,
					month: this.Month,
					day: this.Day
				}
				HttpServer.httpPost.call(this, '/Api/AirSwitch/GetElectricity', params, res => {}, res => {
					if(res.data.code == 0) {
						//数据填充
						this.tableData = res.data.data;
						this.xAxisData = [];
						if(this.tableData.length === 0){
							this.xAxisData.push('暂无数据');
						}
						this.tableData.forEach((item,index) => {
							if(this.tableData[index].addr == 0){
								this.xAxisData.push('总路');
							}else{
								this.xAxisData.push('线路' + this.tableData[index].addr);
							}
						});

						//修改标题名称
						if(this.MonthOrDay === 'month') {
							this.imgTitle = this.Year + '年' + this.Month + '月用电量'
						} else {
							this.imgTitle = this.Year + '年' + this.Month + '月' + this.Day + '日用电量 '
						}

						//绘图
						this.$nextTick(function() {
							this.chartChange(this.chartType);
						});
					}
				});
			}
		},
		watch: {

		},
		created() {
			this.selectedDate = this.templateObj.selectedDate;
			this.MonthOrDay = this.templateObj.MonthOrDay;
			this.getDatas();

		}
	}
</script>
<style scoped lang="less">
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
	
	.bg-purple {
		width: 100%;
		height: 100%;
		// box-shadow: 1px 1px 3px #888888;
		// border: 1px solid #B0B0B0;
		// border-radius: 3px;
		.panel-title {
			// margin-right: 12px;
			// width: 100%;
			height: 25px;
			color: white;
			background-color: #000;
			border-radius: 3px;
			line-height: 25px;
			padding: 0 10px;
			text-align: center;
		}
		.detail-section {
			width: 100%;
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
		}
	}
</style>